* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;
}

.loader {
    position: relative;
    width: 300px;
    height: 10px;
    background: #fff;
    -webkit-box-reflect: below 1px linear-gradient(transparent,
            #0005);
}

.loader::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #fb0094, #0000ff,
            #00ff00, #ffff00, #fb0094, #0000ff, #00ff00, #ffff00,
            #fb0094);
    animation: animate 20s linear infinite;
    background-size: 50%;
}

.loader::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #fb0094, #0000ff,
            #00ff00, #ffff00, #fb0094, #0000ff, #00ff00, #ffff00,
            #fb0094);
    animation: animate 20s linear infinite;
    background-size: 500%;
    filter: blur(20px);
}
@keyframes animate {
    0%{
        background-position: 0 0;
    }
    0%{
        background-position: 500% 0;
    }
}